﻿@{
    ViewBag.Title = "Schedule";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<link href="~/Content/css/fullcalendar-3.8.2/fullcalendar.min.css" rel="stylesheet" />
    @*<script src="~/Content/js/fullcalendar-3.8.2/jquery.min.js"></script>*@
        <script src="~/Content/js/fullcalendar-3.8.2/moment.min.js"></script>
        <script src="~/Content/js/fullcalendar-3.8.2/fullcalendar_Price.min.js"></script>
<script>
    var keyValue = $.request("keyValue");
    var SiteId = $.request("SiteId");
    var type = $.request("type");

    var datalist = [];
    var datajson = {
        title: '',
        start: '',
        end: '',
        className: []
    }
    $(function () {
        if (type == "disabled") {
            document.getElementById("form1").style.display = "none";
        }
        if (!!keyValue) {
            $.ajax({
                url: "/SiteManage/Space/GetListBySpaceId",
                data: { F_SpaceId: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        var className = [];
                        if (data[i].F_Type == 1) {//有意向
                            className = ['yellow'];
                        } else if (data[i].F_Type == 2) {//已预订
                            className = ['red'];
                        }
                        var datajson = {
                            title: data[i].F_activityTitel,
                            start: data[i].F_StartDate,
                            end: new Date(addDate(data[i].F_EndDate, 1)),
                            className: className,
                            F_Id: data[i].F_Id,
                            F_SiteId: data[i].F_SiteId,
                            F_SpaceId: data[i].F_SpaceId 
                        };
                        datalist.push(datajson);
                    }
                }
            });
        }
    });
    function addDate(date, days) {
        var d = new Date(date);
        d.setDate(d.getDate() + days);
        var m = d.getMonth() + 1;
        return d.getFullYear() + '-' + m + '-' + d.getDate();
    } 
    $(document).ready(function () {
        $("#F_SiteId").val(SiteId);
        $("#F_SpaceId").val(keyValue);
        var activityDate = "";

        var now = new Date().Format("yyyy-MM-dd");
        $('#calendar').fullCalendar({
            defaultDate: now,
            editable: true,
            selectable: true,
            eventLimit: true, // allow "more" link when too many events
            dayClick: function (date, jsEvent, view) {
                if (date > new Date()) {
                    console.log(date);
                    var sdatevalue = $("#F_StartDate").val();
                    if (sdatevalue == "") {
                        $("#F_StartDate").val(date.format());
                        $("#F_EndDate").val(date.format());
                    }
                    else {
                        var sdate = new Date($("#F_StartDate").val());
                        var edate = new Date(date.format());
                        if (edate > sdate) {
                            $("#F_EndDate").val(date.format());
                        }
                        else {
                            $("#F_EndDate").val($("#F_StartDate").val());
                            $("#F_StartDate").val(date.format());
                        }
                    }
                }
            },
            eventClick: function (calEvent, jsEvent, view) {
                var edate = new Date(addDate(calEvent.end, -1));
                $("#F_activityTitel").val(calEvent.title);
                $("#F_Id").val(calEvent.F_Id);
                $("#F_SiteId").val(calEvent.F_SiteId);
                $("#F_SpaceId").val(calEvent.F_SpaceId);
                $("#F_StartDate").val(calEvent.start.format("YYYY-MM-DD"));
                $("#F_EndDate").val(edate.Format("yyyy-MM-dd"));
                if (calEvent.className == "yellow") {
                    $("#F_Type").val(1);
                } else {
                    $("#F_Type").val(2); 
                }
                console.log(calEvent);
            },
            eventDrop: function (calEvent, delta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
                var edate = new Date(addDate(calEvent.end, -1));
                $("#F_activityTitel").val(calEvent.title);
                $("#F_Id").val(calEvent.F_Id);
                $("#F_SiteId").val(calEvent.F_SiteId);
                $("#F_SpaceId").val(calEvent.F_SpaceId);
                $("#F_StartDate").val(calEvent.start.format("YYYY-MM-DD"));
                $("#F_EndDate").val(edate.Format("yyyy-MM-dd"));
                if (calEvent.className == "yellow") {
                    $("#F_Type").val(1);
                } else {
                    $("#F_Type").val(2);
                }
                //updateEvent: $(".selector").fullCalendar("updateEvent", calEvent);  //更新日历空间中的一个日程事件  
                //renderEvent: $(".selector").fullCalendar("renderEvent", calEvent, [stick]); //新渲染事件  
                //removeEvents: $(".selector").fullCalendar("removeEvents",1); //从日历中删除一个日程事件.   
            },  
            events: datalist
        });

    });
    
    function submitForm() {
        if ($('#F_activityTitel').val() == "" || $("#F_Type").val() == "" || $("#F_StartDate").val() == "" || $("#F_EndDate").val() == "") {
            $.modalAlert("请先填写完整的数据后再提交！", "warning");
            return false;
        }
        $.ajax({
            type: 'POST',
            url: "/SiteManage/Space/intentionalitySubmitForm",
            dataType: "json",
            data: $("#form1").formSerialize(),
            async: false,
            success: function (data) {
                $.modalAlert("保存成功", "warning");
                $.reload();
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    function btn_delete() {
        if ($("#F_Id").val()) {
            $.deleteForm({
                url: "/SiteManage/Space/DeleteIntentionalityForm",
                param: { keyValue: $("#F_Id").val() },
                success: function () {
                    $.modalAlert("删除成功！", "warning");
                    $.reload();
                }
            })
        }
        else {
            $.modalAlert("请先选择您要删除的档期数据！", "warning");
        }
    }
</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    .fc button, .fc-button-group, .fc-time-grid .fc-event .fc-time span {
        display: block;
    }

    ul {
        margin-left: -38px;
    }

    li {
        list-style-type: none;
        line-height: 15px;
        height: 30px;
    }

    #calendar {
        max-width: 700px;
        margin: 0 auto;
    }

    .color li span {
        border: 1px solid #e5e0e0;
        width: 20px;
        height: 10px;
        float: left;
        margin-right: 20px;
    }

    .white {
        background-color: white !important;
    }

    .red {
        background-color: #f19696 !important;
    }

    .yellow {
        background-color: #b2bf3a !important;
    }

    .removeli {
        font-size: 20px;
        font-weight: bold;
        margin-right: 16px;
        text-decoration: none;
    }
    .fc-event {
        border:0px;
    }
    .form .formTitle {
        position: relative;
        left: 0px;
        text-align: left !important;
        white-space: nowrap;
        font-weight: normal;
        width: 140px;
        padding-right: 10px;
        padding-left: 3px !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    .form .formTitle {
        position: relative;
        left: 0px;
         text-align: left; 
        white-space: nowrap;
        font-weight: normal;
        width: 90px;
        padding-right: 15px;
    }
    .form-control {
        height:22px;
        margin-right:20px;
        width:80%;
    }


</style>

<div id='calendar' style="float:left;"></div>
<div style="float:right; width:240px;">
    <div>
        <h3>颜色备注</h3>
        <ul class="color">
            <li>
                <span class="white"> </span> <p>可预订</p>
            </li>
            <li>
                <span class="yellow"> </span> <p>意向中</p>
            </li>
            <li>
                <span class="red"> </span> <p>已租赁</p>
            </li>
        </ul>
        <form id="form1">
            <table class="form">
                <tr>
                    <td class="formTitle">活动主题</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="F_activityTitel" name="F_activityTitel" class="form-control required" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">状态</td>
                </tr>
                <tr>
                    <td>
                        <select id="F_Type" name="$" class="form-control required">
                            <option value="">==请录入档期状态==</option>
                            <option value="1">意向中</option>
                            <option value="2">已租赁</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">活动开始时间</td>
                </tr>
                <tr>
                    <td>
                        <input type="date" id="F_StartDate" name="F_StartDate" class="form-control required" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">活动结束时间</td>
                </tr>
                <tr>
                    <td>
                        <input type="date" id="F_EndDate" name="F_EndDate" class="form-control required" />
                        <input type="hidden" id="F_Id" value="" name="F_Id" class="form-control" />
                        <input type="hidden" id="F_SiteId" name="F_SiteId" class="form-control" />
                        <input type="hidden" id="F_SpaceId" name="F_SpaceId" class="form-control" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="F_delBtn" onclick="btn_delete()" type="button" value="删除档期" class="btn btn-primary" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

